<template>
    <el-form ref="form" label-width="80px">
        <el-row>
            <el-col :span="4">
                <el-form-item label="年度">
                    <el-select v-model="searchForm.evalYear" filterable placeholder="请选择">
                        <el-option
                                v-for="item in yearsList"
                                :key="item.value"
                                :label="item.label"
                                :value="item.value">
                        </el-option>
                    </el-select>
                </el-form-item>
            </el-col>
            <el-col :span="12" v-if="showArea">
                <el-form-item label-width="0px">
                    <el-col :span="8">
                        <el-form-item prop="province" label="省份">
                            <el-select v-model="searchForm.provinceId"
                                       filterable
                                       placeholder="请选择"
                                       @change="selectProvince">
                                <el-option v-for="province in provinceList"
                                           :key="province.areaId"
                                           :label="province.areaName"
                                           :value="province.areaId"></el-option>
                            </el-select>
                        </el-form-item>
                    </el-col>
                    <el-col :span="8">
                        <el-form-item prop="city" label="市">
                            <el-select v-model="searchForm.cityId"
                                       filterable
                                       placeholder="请选择"
                                       @change="selectCity">
                                <el-option v-for="city in cityList"
                                           :key="city.areaId"
                                           :label="city.areaName"
                                           :value="city.areaId"></el-option>
                            </el-select>
                        </el-form-item>
                    </el-col>
                    <el-col :span="8">
                        <el-form-item prop="area" label="区县">
                            <el-select v-model="searchForm.regionId"
                                       filterable
                                       placeholder="请选择"
                                        @change="selectArea">
                                <el-option v-for="area in areaList"
                                           :key="area.areaId"
                                           :label="area.areaName"
                                           :value="area.areaId"></el-option>
                            </el-select>
                        </el-form-item>
                    </el-col>
                </el-form-item>
            </el-col>
            <el-col :span="4" v-if="showStatus">
                <el-form-item prop="status" label="状态">
                    <el-select v-model="searchForm.evalStatus"
                               placeholder="请选择">
                        <el-option v-for="status in statusList"
                                   :key="status.value"
                                   :label="status.label"
                                   :value="status.value"></el-option>
                    </el-select>
                </el-form-item>
            </el-col>
            <el-button type="primary" @click="search" style="margin-left: 20px;">查询</el-button>
            <el-button type="danger" @click="reset" style="margin-left: 20px;">重置</el-button>
        </el-row>
    </el-form>
</template>

<script>
import {statusList} from '@/utils/data'
export default {
	props: {
		showArea: {
			type: Boolean,
			default: true
		},
        showStatus: {
            type: Boolean,
            default: false
        }
	},
	data(){
		return {
            searchForm: {
                evalYear : wfy.format('yyyy', new Date()),
                area: '',
                city: '',
                province: '',
                areaId: null,
                cityId: null,
                regionId:null,
                region:null,
                provinceId: null,
                evalStatus: null
            },
			yearsList : [],
            provinceList: [],
            cityList: [],
            areaList: [],
            statusList: statusList
		}
	},
	mounted () {
		this.init();
	},
	methods: {
		// 默认设置某些数据
		init () {
			this.yearsList = []
            let year = Number(wfy.format('yyyy', new Date()))
			for (let i = 2000; i < 2060; i++) {
				this.yearsList.push({
					value: i,
					label: i
				})
			}
            this.listAreaByParentId().then(({ data }) => {
                this.provinceList = data
            })
		},
        listAreaByParentId (pid) {
            if (!pid) pid = 0
            return this.$http({
                url: this.$http.adornUrl(`/admin/area/listByPidForUid`),
                method: 'get',
                params: this.$http.adornParams({
                    pid : pid,
                    uid : this.$store.state.user.id
                })
            })
        },
        reset() {
          this.searchForm.cityId = null
          this.searchForm.city = null
          this.searchForm.province = null
          this.searchForm.provinceId = null
          this.searchForm.area = null
          this.searchForm.areaId = null
          this.searchForm.region = null
          this.searchForm.regionId = null
          this.searchForm.evalStatus = null
          this.evalYear = wfy.format('yyyy', new Date())

        },
        // 选择省
        selectProvince (val) {
            console.log('🚀 ~ val', val)

            let findProvince = this.provinceList.find((item) => {
                return item.areaId === val
            })
            console.log('🚀 ~ findProvince', findProvince)
            this.searchForm.province = findProvince.areaName;

            this.searchForm.cityId = null
            this.searchForm.city = ''

            this.searchForm.regionId = null
            this.searchForm.region = ''
            // 获取城市的select
            this.listAreaByParentId(val).then(({ data }) => {
                this.cityList = data
            })
        },
        // 选择市
        selectCity (val) {
            let findCity = this.cityList.find((item) => {
                return item.areaId === val
            })
            console.log('🚀 ~ findCity', findCity)
            this.searchForm.city = findCity.areaName;

            this.searchForm.areaId = null
            this.searchForm.area = ''
            // 获取区的select
            this.listAreaByParentId(val).then(({ data }) => {
                this.areaList = data
            })
        },
        selectArea(val){
            let findArea = this.areaList.find((item) => {
                return item.areaId === val
            })
            console.log('🚀 ~ findArea', findArea)
            //this.searchForm.area = findArea.areaName;
            this.searchForm.region = findArea.areaName;
        },
		search(){
			if(wfy.empty(this.searchForm.evalYear)){
				this.$alert("请选择年度","友情提醒");
				return;
			}
			this.$emit("search",this.searchForm);
		},
		exportPdf(){
			this.$emit("export");
		}
	}
}
</script>

<style lang="scss" scoped>

</style>
